<template>
  <view class="normal-login-container">
	<view class="header">
		<uni-icons  fontFamily="iconfont" @click="goBack" :size="24" color="#666">{{'\ue64f'}}</uni-icons>
		<view class="title">个人信息编辑</view>
	</view>

	<view class="p15">
		<uni-forms ref="form" :model="user" labelWidth="100px" 
		:rules="rules"
  validateTrigger="blur,change">
			
		<uni-forms-item label="用户图像" name="avatar" class="align-center">
		  <image @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
		  </image>
		</uni-forms-item>
		  <uni-forms-item label="用户名称" name="userName" required>
		    <uni-easyinput v-model="user.userName" placeholder="请输入名称" />
		  </uni-forms-item>
		  <uni-forms-item label="密码" name="password" required>
			  <uni-easyinput v-model="user.password" type="password" placeholder="请输入密码" maxlength="20"/>
		  </uni-forms-item>

		  <uni-forms-item label="手机号码" name="tel" required>
		    <uni-easyinput v-model="user.tel" placeholder="请输入手机号码" />
		  </uni-forms-item>
		  <uni-forms-item label="性别" name="gender" required>
		    <uni-data-checkbox v-model="user.gender" :localdata="sexs"/>
		  </uni-forms-item>
		  <uni-forms-item label="所属部门" name="deptId" required>
		    <uni-data-select
		          v-model="user.deptId"
		          :localdata="rangeDeparts"
		        >
				</uni-data-select>
		  </uni-forms-item>
		  <uni-forms-item label="就任岗位" name="postId" required>
		    <uni-data-select
		          v-model="user.postId"
		          :localdata="rangePosts"
		        >
		  </uni-data-select>
		  </uni-forms-item>
		  <uni-forms-item label="考核分数" name="score">
		    <uni-easyinput v-model="user.score" disabled/>
		  </uni-forms-item>
		  <uni-forms-item label="在职企业" name="company" required>
	<!-- 	    <uni-easyinput v-model="user.company" placeholder="请输入企业名称" /> -->
			<uni-data-select
			      v-model="user.company"
			      :localdata="rangeCompanys"
			    />
		  </uni-forms-item>
		  <uni-forms-item label="在职状态" name="empStatus" required>
		    <uni-data-checkbox v-model="user.empStatus" :localdata="EmpStatus" />
		  </uni-forms-item>
		  <uni-forms-item label="是否管理员" name="isAdmin">
		    <uni-data-checkbox v-model="user.isAdmin" :localdata="Roles" disabled/>
		  </uni-forms-item>
		  <uni-forms-item label="入职日期" name="hireDate" required>
		      <uni-datetime-picker type="date" v-model="user.hireDate" />
		  </uni-forms-item>
		</uni-forms>
		<button type="primary"  @click="updateUser">提交</button>
	</view>
 <!--   <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view> -->
  </view>
</template>

<script>
	import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue';
	import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue';
	import uniEasyinput from '@/components/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
	import uniDataCheckbox from '@/components/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue'
	import uniDataSelect from '@/components/uni-data-select/components/uni-data-select/uni-data-select.vue'
	import uniDatetimePicker from '@/components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import Female from '@/static/img/user/female.png'
	import Male from '@/static/img/user/male.png'
    import AuthApi from '@/utils/auth'
    import config from '@/config'
	import UserApi from '@/api/user'
	
  export default {
	  components: {
	  	 uniForms,
	     uniFormsItem,
	  	 uniEasyinput,
	  	 uniDataCheckbox,
		 uniDataSelect,
		 uniDatetimePicker
	  },
     data() {
      return {
        user: null,
        sexs: [{
         text: '男',
         value: "m"
       }, {
         text: '女',
         value: "f"
       }],
	   EmpStatus: [{
	     text: '离职',
	     value: 1
	   }, {
	     text: '在职',
	     value: 0
	   }],
	   Roles: [{
	     text:'管理员',
	     value: 1
	   }, {
	     text: '普通员工',
	     value: 0
	   }],
	    rangePosts: this.$store.state.post.posts.map(item=>{
			return {
				value: item.postId,
				text: item.postName
			}
		}),
		rangeCompanys: [{
			text:'深圳市仰望创新电子有限公司',
			value: '深圳市仰望创新电子有限公司',
		},{
			text:'东莞市仰望创新电子有限公司',
			value: '东莞市仰望创新电子有限公司',
		}
		],
		rangeDeparts: this.$store.state.department.departMents.map(item=>{
			return {
				value: item.deptId,
				text: item.deptName
			}
		}),
       rules: {
         userName: {
           rules: [
			   {
			     required: true,
			     errorMessage: '用户名不能为空'
			   },
		     { validateFunction: this.check_user_name }
		   ]
         },
		 company: {
           rules: [{
             required: true,
             errorMessage: '企业名称不能为空'
           }
		   ],
         },
		 password: {
		   rules: [{
		     required: true,
		     errorMessage: '用户密码不能为空'
		   },
		   { validateFunction: this.check_password }
		   ]
		 },
         tel: {
           rules: [{
             required: true,
             errorMessage: '手机号码不能为空'
           }, {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             errorMessage: '请输入正确的手机号码'
           }]
         },
		 deptId:{
			 rules: [{
			   required: true,
			   errorMessage: '所在部门不能为空'
			 }]
		 },
		postId:{
			 rules: [{
			   required: true,
			   errorMessage: '所在职位不能为空'
			 }]
		 },
		 hireDate:{
			 rules: [{
			   required: true,
			   errorMessage: '入职日期不能为空'
			 }]
		 },
         // email: {
         //   rules: [{
         //     required: true,
         //     errorMessage: '邮箱地址不能为空'
         //   }, {
         //     format: 'email',
         //     errorMessage: '请输入正确的邮箱地址'
         //   }]
         // }
       }
      }
    },
	onLoad() {
		const user =  AuthApi.getUser() 
		this.user = {
			...user,
			postId: user?.post?.postId,
			deptId: user?.departMent?.deptId
		}
		this.avatar = this.user?.avatar
	},
	onReady() {
	  // this.$refs.form.setRules(this.rules)
	},
    methods: {
		//修改性别
	// changeSex(e){
	// 	console.log(e)
	// 	if(e.detail.value == "0" && this.user.avatar == Female){ //男
	// 		console.log('男')
	// 		this.user.avatar = Male
	// 	} else if( e.detail.value == "1" && this.user.avatar == Male){
	// 		console.log('女')
	// 		this.user.avatar = Female //女
	// 	}
	// 	console.log(this.user)
	//   },
	 check_user_name(rule, value, data, callback) {
		 const rsCheck= /^[\w\u4e00-\u9fa5]+$/.test(value)
		  if (!rsCheck) {
			callback('账号只能包含字母、数字、下划线和汉字！')
		  } else {
			callback()
		  }
     },
	 check_password(rule, value, data, callback) {
		let hasDigit = /[0-9]/.test( value,);  // 判断是否包含数字
		let hasLetter = /[a-zA-Z]/.test( value,);  // 判断是否包含字母
		if(value.length <=5) {
		  callback("请输入最少6位的密码")
		} else if (!hasDigit || !hasLetter) {
		 callback("请输入包含数字和字母的密码")
		} else {
			callback()
		  }
	 },
      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login/login`)
      },
	  updateUser(){
		  console.log('test......')
		  this.$refs.form.validate().then(res => {
		        UserApi.updateUser(this.user).then(response => {
				if(response?.data?.data){
					AuthApi.setUser(response?.data?.data)
					this.$modal.msgSuccess("修改成功")
				}
				else {
					 this.$modal.msgError("修改失败")
				}
		    })
		  })
	  },
	  goBack: uni.navigateBack
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/static/iconfont/iconfont.css";
  page {
    background-color: #ffffff;
  }
  .header {
  	display: flex;
  	justify-content: flex-start;
  	align-items: center;
  	width: 100%;
  	padding: 24upx;
  	box-sizing: border-box;
  	.title {
  		font-size: 30upx;
  		font-weight: bold;
  		margin-left: 24upx;
  		color: #333;
  	}
  }
  .p15{
	  padding: 15px;
  }
  .normal-login-container {
	 background-color: #ffffff; /* 设置背景颜色 */
	 height: 100vh; /* 确保背景覆盖整个页面 */
	 width: 100%;
	 padding-top: var(--status-bar-height);
    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 5%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 10px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }
  
  .segmented-control {
    margin-bottom: 15px;
  }

  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }

  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
</style>
